<template>
  <div>
    <section class="public-box">
      <h6>品牌信息</h6>
      <AddBransItem leftText="品牌名称" :rightText="checkTitleText">
        <input type="text" placeholder="请输入品牌名称" slot="middledom" maxlength="30" @blur="onBlur()" v-model="brandForm.title" v-inputDelete>
      </AddBransItem>
    </section>
    <section class="brand-tips">
      <p>
        <img src="../../../assets/img/tips-icon.png" alt="">
        品牌名称与商标注册证保持一致
      </p>
    </section>
    <section class="public-box">
      <AddBransItem leftText="商标注册证" :height="2.5" :formatshow="true" :upWarnShow="registerShow" imgType="sbzc" @onSwitchShow="showTemplate">
        <UploadItem tipText="对焦商标注册证 使图文清晰可见" :imgUrl="brandForm.register_cer" slot="middledom" @fileUrl="onRegister"></UploadItem>
      </AddBransItem>
      <AddBransItem class="top" leftText="品牌LOGO" :height="2.5" :formatshow="true" :upWarnShow="thumbShow" :templateShow="false">
        <UploadItem tipText="对品牌LOGO 使图文清晰可见" :imgUrl="brandForm.thumb" slot="middledom" @fileUrl="onThumb"></UploadItem>
      </AddBransItem>
    </section>
    <section class="prove-box public-box">
      <h6>其他证明</h6>
      <p>如企业有转让、购买证明，请按照系统提示的模式上传相应的资质证明。</p>
      <AddBransItem leftText="商标变更证明" :height="2.5" :formatshow="true" :mustFill="false" imgType="sbbg" @onSwitchShow="showTemplate">
        <UploadItem tipText="对商标变更证明 使图文清晰可见" :imgUrl="brandForm.biangeng" slot="middledom" @fileUrl="onBiangeng"></UploadItem>
      </AddBransItem>
      <AddBransItem class="top" leftText="商标授权书" :height="2.5" :formatshow="true" :mustFill="false" imgType="sbsq" @onSwitchShow="showTemplate">
        <UploadItem tipText="对商标授权书 使图文清晰可见" :imgUrl="brandForm.shouquan" slot="middledom" @fileUrl="onShouquan"></UploadItem>
      </AddBransItem>
      <AddBransItem class="top" leftText="商标转让证明" :height="2.5" :formatshow="true" :mustFill="false" imgType="sbzr" @onSwitchShow="showTemplate">
        <UploadItem tipText="对商标转让证明 使图文清晰可见" :imgUrl="brandForm.zhuanrang" slot="middledom" @fileUrl="onZhuanrang"></UploadItem>
      </AddBransItem>
      <AddBransItem class="top" leftText="受理通知书" :height="2.5" :formatshow="true" :mustFill="false" imgType="sltz" @onSwitchShow="showTemplate">
        <UploadItem tipText="对受理通知书 使图文清晰可见" :imgUrl="brandForm.shouli" slot="middledom" @fileUrl="onShouli"></UploadItem>
      </AddBransItem>
      <AddBransItem class="top" leftText="续展证明" :height="2.5" :formatshow="true" :mustFill="false" imgType="xzzm" @onSwitchShow="showTemplate">
        <UploadItem tipText="对续展证明 使图文清晰可见" :imgUrl="brandForm.xuzhan" slot="middledom" @fileUrl="onXuzhan"></UploadItem>
      </AddBransItem>
    </section>
  </div>
</template>
<script>
import AddBransItem from './AddBransItem'
import UploadItem from '../../../components/UploadItem'
export default {
  components: {
    AddBransItem,
    UploadItem
  },
  props: {
    uesrOldInfo: {
      type: Object
    }
  },
  data() {
    return {
      brandForm: {
        title: null, // 品牌信息
        register_cer: null, // 商标注册注册证
        thumb: null, // 品牌logo
        biangeng: null, // 商标变更
        shouquan: null, // 授权
        zhuanrang: null, // 转让
        shouli: null, // 受理
        xuzhan: null, // 续展
      },
      checkTitleText: null,
      registerShow: false,
      thumbShow: false
    }
  },
  watch: {
    uesrOldInfo(newVal) {
      if (newVal) {
        // 品牌名称
        this.brandForm.title = newVal.title
        // 商标注册注册证
        this.brandForm.register_cer = newVal.shangbiao
        // 品牌logo
        this.brandForm.thumb = newVal.thumb
        // 商标变更
        this.brandForm.biangeng = newVal.biangeng
        // 授权
        this.brandForm.shouquan = newVal.shouquan
        // 转让
        this.brandForm.zhuanrang = newVal.zhuanrang
        // 受理
        this.brandForm.shouli = newVal.shouli
        // 续展
        this.brandForm.xuzhan = newVal.xuzhan
      }
    }
  },
  methods: {
    submit() {
      if (!this.brandForm.title) {
        this.checkTitleText = '必填项'
        this.$emit('onErrShow', true)
        return
      } else {
        this.checkTitleText = ''
      }
      if (!this.brandForm.register_cer) {
        this.$emit('onErrShow', true)
        this.registerShow = true
        return
      } else {
        this.registerShow = false
      }
      if (!this.brandForm.thumb) {
        this.$emit('onErrShow', true)
        this.thumbShow = true
        return
      } else {
        this.thumbShow = false
      }
      let params = this.initFormData()
      if (this.$route.query.itemid) {
        // 提交品牌数据 - 审核失败修改页
        params.itemid = this.$route.query.itemid
        this.postFailBrand(params)
      } else {
        // 提交品牌数据
        this.addBrand(params)
      }
    },
    // 提交品牌数据 
    addBrand(params) {
      this.$showLoading()
      this.$api.addBrand(this.$route.query.catid, params).then(data => {
        this.$hideLoading()
        if (data.data.status == 1) {
          this.$router.replace("/addsuccess/" + this.$route.query.catid + '?formPath=' + this.$route.query.formPath)
          window.sessionStorage.removeItem('brandFrom')
        } else {
          this.$emit('onErrShow', true)
          this.$emit('onMsgText', data.data.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 提交品牌数据 - 审核失败修改页
    postFailBrand(params) {
      this.$api.postFailBrand(this.$route.query.catid, params).then(data => {
        if (data.data.status == 1) {
          let formPath = this.$route.query.formPath || '/'
          this.$router.replace("/addsuccess/" + this.$route.query.catid + '?formPath=' + formPath)
          window.sessionStorage.removeItem('brandFrom')
        } else {
          this.$emit('onErrShow', true)
          this.$emit('onMsgText', data.data.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 获取提交数据
    initFormData() {
      let fornDataOne = JSON.parse(window.sessionStorage.getItem('brandFrom'))
      let params = {
        'catid': fornDataOne.catid,
        'company': fornDataOne.company,
        'address': fornDataOne.address,
        'homepage': fornDataOne.homepage,
        'license': fornDataOne.license,
        'tel': fornDataOne.tel,
        'auType': 1,
        'verify': fornDataOne.verify,
        'title': this.brandForm.title,
        'register_cer': this.brandForm.register_cer,
        'thumb': this.brandForm.thumb,
        'biangeng': this.brandForm.biangeng,
        'shouquan': this.brandForm.shouquan,
        'zhuanrang': this.brandForm.zhuanrang,
        'shouli': this.brandForm.shouli,
        'xuzhan': this.brandForm.xuzhan,
      }
      return params
    },
    validateBrandName() {
      this.$api.validateBrandName(this.$route.query.catid, {
        title: this.brandForm.title
      }).then(data => {
        if (data.data.status == 1) {
          this.checkTitleText = ''
        } else {
          if (data.data.msg.indexOf('存在')) {
            this.checkTitleText = '已存在'
          } else {
            this.checkTitleText = data.data.msg
          }
        }
      }).catch(err => {
        console.log(err)
      })
    },
    onXuzhan(e) {
      this.brandForm.xuzhan = e
    },
    onShouli(e) {
      this.brandForm.shouli = e
    },
    onZhuanrang(e) {
      this.brandForm.zhuanrang = e
    },
    onShouquan(e) {
      this.brandForm.shouquan = e
    },
    onBiangeng(e) {
      this.brandForm.biangeng = e
    },
    onThumb(e) {
      this.brandForm.thumb = e
      this.thumbShow = false
    },
    onRegister(e) {
      this.brandForm.register_cer = e
      this.registerShow = false
    },
    onBlur() {
      if (!this.brandForm.title) {
        this.checkTitleText = '必填项'
        return
      } else {
        // 校验公司名称
        this.validateBrandName()
        return
      }
    },
    // 接受子组件传入参数
    showTemplate(e, v) {
      this.$emit('showTemplate', e, v)
    }
  }
}
</script>
<style lang='scss' scoped>
.public-box {
  width: 100%;
  background: #fff;
  padding: 0.3rem 0.3rem 0 0.3rem;
  .top {
    margin-top: 0.3rem;
  }
  h6 {
    font-size: 0.34rem;
    line-height: 0.34rem;
    color: rgba(51, 51, 51, 1);
    margin-bottom: 0.26rem;
  }
  p {
    font-size: 0.24rem;
    color: rgba(102, 102, 102, 1);
    line-height: 0.3rem;
    letter-spacing: 0.01rem;
    margin-bottom: 0.6rem;
  }
}
.prove-box {
  margin-top: 0.2rem;
}
.brand-tips {
  width: 100%;
  height: 1.2rem;
  background: rgba(246, 246, 246, 1);
  padding-left: 0.3rem;
  padding-top: 0.26rem;
  font-size: 0.24rem;
  color: rgba(153, 153, 153, 1);
  img {
    width: 0.22rem;
    height: auto;
    vertical-align: middle;
  }
}
</style>
